<script>
import videoListData from "../assets/json/diversityVideoList.json"
import {resourceURL} from "../axiosConfig";

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title',
        url: 'url',
      },
      listData: videoListData,
    }
  },
  watch: {
    listData: {
      deep: true,
      handler(newVal) {
        newVal.forEach(node => this.updateParentNodeStatus(node));
      }
    }
  },
  methods: {
    updateNodeStatus(node) {
      console.log(node);
      if (node.children) {
        const childStatus = node.children.map(child => this.updateNodeStatus(child));
        const allChildrenDone = childStatus.every(status => status);
        node.isDone = allChildrenDone;
        return allChildrenDone;
      } else {
        return node.isDone;
      }
    },
    updateParentNodeStatus(node) {
      if (node.children) {
        const childStatus = node.children.map(child => this.updateNodeStatus(child));
        node.isDone = childStatus.every(status => status);
      }
    },
    handleNodeClick(node) {
      console.log(node.isDone);
      this.$set(node, 'isDone', true); // 使用 $set 方法来触发 Vue 的响应式更新
      this.updateNodeStatus(node);
      console.log(node.isDone);
    },
    handleUrlClick(url) {
      // 将url参数传递给父组件
      url = resourceURL + url;
      console.log(url);
      this.$emit('url-clicked', url);
    }
  }

}

</script>

<template>
  <div>
    <el-tree
      :data="listData"
      :props="defaultProps"
      accordion
      highlight-current
      @node-click="handleNodeClick">
      <template slot-scope="{ node, data }">
        <div class="custom-tree-node" @click="handleUrlClick(data.url)">
          <div class="label-wrapper" :title="node.label">{{ node.label }}</div>
          <span>
            <img v-if="data.isDone" class="done" src="@/assets/img/icon_yiwanc.png">
            <img v-else class="notDone" src="@/assets/img/icon_weiwanc.png">
          </span>
        </div>
      </template>
    </el-tree>
  </div>
</template>


<style scoped lang="scss">
::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #F5F7FA;
}

::v-deep .el-tree-node__content:hover {
  background-color: #F0F6FF !important;
  color: #1f86f6;
}

::v-deep .el-tree-node__content {
  height: 2rem;
}

::v-deep .el-tree-node__label {
  font-size: 14px !important;
}

::v-deep .el-icon-turn-off {
  position: absolute;
  right: 2rem;
}

.done {
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
}

.notDone {
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
}

.custom-tree-node {
  display: flex;
  align-items: center;
}

.label-wrapper {
  //width: 14.5rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  //text-overflow: ellipsis;
  //word-wrap: break-word; /* 添加这一行 */
}

.label-wrapper:hover {
  overflow: visible;
  white-space: normal;
}

</style>
